<template>
  <div>
    
    <div
      ref="gitee"
      :class="className"
      :style="{ height: height, width: width }"
      v-loading="loading"
       element-loading-text="gitee贡献度正在加载中..."
    >
      </div>
    <div v-show="this.type" class="gitee_su">
      <!-- 数据来源 -->
       <span style="font-size:16px;">数据来源：</span>
      <a  href="https://gitee.com">Gitee</a>
 
 
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/admin/components/mixins/resize";
import { getGiteeInfo } from "@/api/author";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "220px",
    },
    item:{
      type: String
    }
  },
  data() {
    return {
      type:false,
      chart: null,
      data: [],
      loading:true,
    };
  },
  async mounted() {
    // alert(this.item)
    await this.getGiteeData();
    console.log(this.data);
    this.$nextTick(() => {
     
        this.initChart();
 

      // this.initChart();
    });
  },
  methods: {
    getVirtulData(year, data_1) {
      year = year || "2017";
      var date = +echarts.number.parseDate(year + "-01-01");
      var end = +echarts.number.parseDate(+year + 1 + "-01-01");
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time < end; time += dayTime) {
        // console.log(data_1);

        let time_1 = echarts.format.formatTime("yyyy-MM-dd", time);

        this.data.push([time_1, data_1[time_1] || 0]);
      }
      return data;
    },
    initChart() {
      console.log(this.data);

      this.chart = echarts.init(this.$refs.gitee, "macarons");
      this.setOptions(this.data);
    },
    setOptions(data) {
      this.chart.setOption({
        textStyle: {
          color: "#fff",
        },
        title: {
          top: 5,
          left: "center",
          text: "gitee贡献图",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#3c4858",
          },
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#fff",
          borderColor: "#fffff",
          borderWidth: 0.2,
          formatter: function (obj) {
            var value = obj.value;
            return (
              '<div style="font-size: 14px;">' +
              value[1] +
              "贡献：" +
              value[0] +
              "</div>"
            );
          },
        },

        visualMap: {
          min: -3,
          max: 10,
        
          text: ["多", "少"],
          right: "10px",
          type: "piecewise",
          orient: "horizontal",
          splitNumber: 4,
          top: 186,
          itemGap: 0,
          color: "#fff",
          inRange: {
            color: [
              "#EEEEEE",
              "rgb(220,233,200)",
              "rgb(123,201,111)",
              "rgb(25,98,35)",
            ],
          },

          textGap: 30,
          textStyle: {
            fontSize: 15, //字体大小
            color: "#3c4858", //字体颜色
          },
        },

        calendar: {
          top: 50,
          left: 30,
          right: 30,
          cellSize: ["auto", 20],
          range: "2021",
          splitLine: {
            show: false,
          },

          itemStyle: {
            borderWidth: 3,
            borderColor: "#fff",
            //圆角
            borderRadius: 10,
          },
          yearLabel: { show: false },
          dayLabel: {
            color: "#3c4858",
          },
          monthLabel: {
            color: "#3c4858",
          },
        },
        series: {
          type: "heatmap",
          coordinateSystem: "calendar",
          data: data,
        },
      });
    },
    //获取gitee贡献度数据
    async getGiteeData() {
      console.log(this.item);
      await getGiteeInfo({
        endDate: "20211214",
        limit: 365,
        startDate: "20211210",
        username: this.item,
      }).then((res) => {
        this.type=true;
      
        //筛选出贡献度数据
        let data = res.data.data.map((item) => {
          return item.created_at;
        });
       
        //选出每日贡献度
        let dayData = data.map((item) => {
          return item.split("T")[0];
        });
      
        //统计每天的次数
        let dayCount = {};
        dayData.forEach((item) => {
          if (dayCount[item]) {
            dayCount[item]++;
          } else {
            dayCount[item] = 1;
          }
        });
       
        //一年没出现的日期设置为0
        let year = new Date().getFullYear();
        let yearData = this.getVirtulData(year, dayCount);

        //   console.log(this.data);
        //  this.setOptions(this.data)
      });
    },
  },
};
</script>

<style>
.gitee_su{

position: relative;
margin-top: -30px;
padding: 10px;
width: 300px;
}
.gitee_su a{
  color:#7fb7b9
  
}
.gitee_su span{
  color:#3C4858;
  font-family: monospace;
}
</style>
